<template>
  <div>
    <el-container>
      <el-header style="background-color: #409EFF">
        <h2 style="color: aliceblue;line-height: 60px">后台管理界面</h2>
      </el-header>
      <el-main>
        <!--        查询条件开始-->
        <div>
          <el-form ref="form" :model="form" size="mini" label-width="80px">
            <el-row>
              <el-col :span="7">
                <el-form-item label="书名">
                  <el-input v-model="form.bookName"></el-input>
                </el-form-item>
              </el-col>

              <el-col :span="8">
                <el-form-item label="书系">
                  <el-input v-model="form.classify"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="书号">
                  <el-input v-model="form.ISBN"></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="7">
                <el-form-item label="供货商">
                  <el-input v-model="form.supplier"></el-input>
                </el-form-item>
              </el-col>

              <el-col :span="8">
                <el-form-item label="业务员">
                  <el-input v-model="form.salesman"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="出版社">
                  <el-input v-model="form.press"></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="7">
                <el-form-item label="库存量">
                  <el-col :span="11">
                    <el-input v-model="form.pcs"></el-input>
                  </el-col>
                  <el-col class="line" :span="2"> 至</el-col>
                  <el-col :span="11">
                    <el-input v-model="form.pcs2"></el-input>
                  </el-col>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="成本价">
                  <el-col :span="11">
                    <el-input v-model="form.costPrice"></el-input>
                  </el-col>
                  <el-col class="line" :span="2"> 至</el-col>
                  <el-col :span="11">
                    <el-input v-model="form.costPrice2"></el-input>
                  </el-col>
                </el-form-item>
              </el-col>

              <el-col :span="8">
                <el-form-item label="修改时间">
                  <el-col :span="11">
                    <el-date-picker type="date" placeholder="选择日期"
                                    format="yyyy-MM-dd"
                                    value-format="yyyy-MM-dd"
                                    v-model="form.modified"
                                    style="width: 100%;"></el-date-picker>
                  </el-col>
                  <el-col class="line" :span="2"> 至</el-col>
                  <el-col :span="11">
                    <el-date-picker type="date" placeholder="选择日期"
                                    format="yyyy-MM-dd"
                                    value-format="yyyy-MM-dd"
                                    v-model="form.modified2"
                                    style="width: 100%;"></el-date-picker>
                  </el-col>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="7">
                <el-form-item label="是否有效">
                  <el-select v-model="form.isEnable">
                    <el-option label="有效" value="1"></el-option>
                    <el-option label="无效" value="0"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>

              <el-col :span="8">
                <el-form-item label="是否销售">
                  <el-select v-model="form.isMarketable">
                    <el-option label="销售" value="1"></el-option>
                    <el-option label="不销售" value="0"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <!--查询条件结束-->
        <el-divider></el-divider>
        <!--操作按钮-->
        <div style="display: inline-block">
          <el-button size="medium" @click="toggleSelection()">取消选择</el-button>
          <el-button size="medium" type="danger" @click="multiDeleteById">删除选中</el-button>
          <el-button size="medium" type="success" @click="multiEnableById">启用/禁用选中</el-button>
          <el-button size="medium" type="warning" @click="multiMarketableById">开启/禁止销售销选中</el-button>
        </div>

        <!-- 入库表单 Form -->
        <el-dialog title="图书详情" :visible.sync="dialogFormVisible" width="80%">
          <el-form ref="form" :model="addForm" size="mini" width="80%" label-width="80px">
            <el-container>
              <el-aside width="320px">
                <!--                图片上传  "https://jsonplaceholder.typicode.com/posts/"
                                             "this.url + '/admin/book/picture'" -->
                <el-upload
                    action="https://jsonplaceholder.typicode.com/posts/"
                    list-type="picture-card"
                    :on-preview="handlePictureCardPreview"
                    :on-remove="handleRemove"
                    :on-success="handleSuccess">
                  <i class="el-icon-plus"></i>
                </el-upload>
                <el-dialog :visible.sync="dialogVisible">
                  <img width="100%" :src="dialogImageUrl" alt="">
                </el-dialog>
              </el-aside>
              <el-main>
                <!--            书名、作者-->
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="书名">
                      <el-autocomplete
                          v-model="addForm.bookName"
                          :fetch-suggestions="querySearchAsync"
                          placeholder="请输入内容"
                          @select="queryBookById"
                      ></el-autocomplete>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="作者">
                      <el-input v-model="addForm.author"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <!--              书号、书系-->
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="书系">
                      <el-input v-model="addForm.classify"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="书号">
                      <el-input v-model="addForm.ISBN"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <!--            出版社、新旧程度-->
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="出版社">
                      <el-input v-model="addForm.press"></el-input>
                    </el-form-item>
                  </el-col>

                  <el-col :span="12">
                    <el-form-item label="新旧程度">
                      <el-input v-model="addForm.degree"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <!--            售价、原价-->
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="售价">
                      <el-input v-model="addForm.price"></el-input>
                    </el-form-item>
                  </el-col>

                  <el-col :span="12">
                    <el-form-item label="原价">
                      <el-input v-model="addForm.oldPrice"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <!--            库存、销量-->
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="库存">
                      <el-input v-model="addForm.pcs"></el-input>
                    </el-form-item>
                  </el-col>

                  <el-col :span="12">
                    <el-form-item label="销量">
                      <el-input v-model="addForm.saleCount"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <!--            开本、纸张-->
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="开本">
                      <el-input v-model="addForm.folio"></el-input>
                    </el-form-item>
                  </el-col>

                  <el-col :span="12">
                    <el-form-item label="纸张">
                      <el-input v-model="addForm.paper"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <!--            供货商、业务员-->
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="供货商">
                      <el-input :disabled="this.addOrUpdate===1" v-model="addForm.supplier"></el-input>
                    </el-form-item>
                  </el-col>

                  <el-col :span="12">
                    <el-form-item label="业务员">
                      <el-input :disabled="this.addOrUpdate===1" v-model="addForm.salesman"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <!--            成本价、入库时间-->
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="成本价">
                      <el-input :disabled="this.addOrUpdate===1" v-model="addForm.costPrice"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="入库时间">
                      <el-date-picker type="date" placeholder="选择日期"
                                      format="yyyy-MM-dd"
                                      :disabled="this.addOrUpdate===1"
                                      value-format="yyyy-MM-dd"
                                      v-model="addForm.created"
                                      style="width: 100%;"></el-date-picker>
                    </el-form-item>
                  </el-col>
                </el-row>
                <!--            入库数量、订单号-->
                <el-row v-if="addOrUpdate===0">
                  <el-col :span="12">
                    <el-form-item label="入库数量">
                      <el-input v-model="addForm.count"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="订单号">
                      <el-input v-model="addForm.documentNo"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <!--            是否有效、销售-->
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="是否有效">
                      <el-select size="small" v-model="addForm.isEnable">
                        <el-option label="有效" value="1"></el-option>
                        <el-option label="无效" value="0"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="是否销售">
                      <el-select size="small" v-model="addForm.isMarketable">
                        <el-option label="销售" value="1" selected="selected"></el-option>
                        <el-option label="不销售" value="0"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>

              </el-main>
            </el-container>

            <div style="padding-right: 50px">
              <el-form-item label="书本简介">
                <el-input
                    type="textarea"
                    size="larger"
                    style="font-size: large"
                    placeholder="请输入内容"
                    v-model="addForm.info"
                    maxlength="500"
                    show-word-limit
                >
                </el-input>
              </el-form-item>
            </div>


          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="submitBooks">确 定</el-button>
          </div>
        </el-dialog>
        <!--        入库表单结束-->

        <div style="float: right;margin-right: 50px">
          <el-button size="small" type="primary" @click="queryBooks">查询</el-button>
          <el-button size="small" type="warning" @click="insertBooks(0)">入库</el-button>
          <el-button size="small" @click="resetForm">重置</el-button>
        </div>
        <!--    查询结果开始-->
        <div style="margin-top: 20px;">
          <el-table
              ref="multipleTable"
              :data="tableData"
              border
              style="width: 100%"
              @selection-change="handleSelectionChange">
            <!--            多选框-->
            <el-table-column
                fixed
                type="selection"
                width="35">
            </el-table-column>
            <!--书名、书系、出版社-->
            <el-table-column
                fixed
                prop="bookName"
                label="书名"
                width="200">
            </el-table-column>
            <el-table-column
                prop="classify"
                label="书系"
                width="120">
            </el-table-column>
            <el-table-column
                prop="press"
                label="出版社"
                width="200">
            </el-table-column>
            <!--库存、售价、书号-->
            <el-table-column
                prop="pcs"
                label="库存量"
                width="65">
            </el-table-column>
            <el-table-column
                prop="price"
                label="售价"
                width="65">
            </el-table-column>
            <el-table-column
                prop="ISBN"
                label="书号"
                width="150">
            </el-table-column>
            <!--供货商、业务员、成本价-->
            <el-table-column
                prop="supplier"
                label="供货商"
                width="100">
            </el-table-column>
            <el-table-column
                prop="salesman"
                label="供货商业务员"
                width="120">
            </el-table-column>
            <el-table-column
                prop="costPrice"
                label="成本价"
                width="65">
            </el-table-column>
            <!--有效、销售、修改时间-->
            <el-table-column
                prop="isEnable"
                label="是否有效"
                width="80"
                :formatter="isEnableFormat">
            </el-table-column>
            <el-table-column
                prop="isMarketable"
                label="是否销售"
                width="80"
                :formatter="isMarketableFormat">
            </el-table-column>
            <el-table-column
                prop="modified"
                label="修改时间"
                width="100">
            </el-table-column>
            <!--操作栏-->
            <el-table-column
                fixed="right"
                label="操作"
                width="100">
              <!--操作栏-->
              <template slot-scope="scope">
                <el-button type="primary" size="small" icon="el-icon-edit" circle
                           @click="handleEdit(scope.$index, scope.row)"></el-button>
                <el-popconfirm style="margin-left: 10px"
                               title="确定删除这本书的数据吗？"
                               @confirm="handleDelete(scope.$index, scope.row)"
                >
                  <el-button slot="reference" type="danger" size="small"
                             icon="el-icon-delete" circle></el-button>
                </el-popconfirm>
              </template>
            </el-table-column>
          </el-table>
          <!--    查询结果结束-->
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import axios from "axios";
import {mapState} from "vuex";

export default {

  data() {
    return {
      /*上传图片*/
      dialogImageUrl: '',
      dialogVisible: false,
      /*入库表单*/
      addNewBook: true,
      dialogFormVisible: false,
      addOrUpdate: 0,
      addForm: {
        id: '',
        picture: '',
        bookName: '',
        modified: '',
        pcs: '',
        costPrice: '',
        ISBN: '',
        isEnable: '1',
        isMarketable: '1',
        press: '',
        supplier: '',
        classify: '',
        salesman: '',
        created: ''
      },
      /*实现搜索选定书籍入库*/
      restaurants: [],
      state: '',
      timeout: null,
      /*查询条件*/
      form: {
        id: '',
        bookName: '',
        modified: '',
        modified2: '',
        pcs: '',
        pcs2: '',
        costPrice: '',
        costPrice2: '',
        ISBN: '',
        isEnable: '',
        isMarketable: '',
        press: '',
        supplier: '',
        classify: '',
        salesman: '',
      },
      /*查询结果*/
      multipleSelection: [],
      multipleSelectionEnable: [],
      multipleSelectionMarketable: [],
      multipleSelectionId: [],
      tableData: []
    }
  },
  methods: {
    //入库表单的搜索功能
    querySearchAsync(queryString, cb) {
      console.log("通过关键字搜索书籍：" + queryString)
      axios.get("/admin/book/bookName/" + queryString).then(r => {
        if (r.data.state === 20000) {
          let results = r.data.data
          let result = results.map(item => {
            return {id: `${item.id}`, value: `${item.bookName}`}
          })
          cb(result)
        }
      })
    },
    //通过ID搜索书籍详细信息
    queryBookById(item) {
      console.log("通过图书ID获取图书详细数据：" + item.id)
      axios.get("/admin/book/" + item.id).then(r => {
        if (r.data.state === 20000) {
          this.addForm = r.data.data
          delete this.addForm.created
          this.addNewBook = false
        }
      }).catch(e => console.log(e))
    },
    //TODO 上传图片
    handleSuccess(file, fileList) {
      console.log(file, fileList)
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
      axios.delete(this.url + "/admin/book/picture", file)
    },
    handlePictureCardPreview(file) {
      this.addForm.picture = file.url;
      console.log(this.addForm.picture)
      this.dialogVisible = true;
    },
    //入库
    insertBooks() {
      this.dialogFormVisible = true
      this.addOrUpdate = 0  //设置表单提交为插入数据
      this.addForm = {
        isEnable: '1',
        isMarketable: '1',
      }
    },
    //单个编辑
    handleEdit(index, row) {
      this.dialogFormVisible = true
      this.addOrUpdate = 1  //设置表单提交为更新数据
      axios.get("/admin/book/" + row.id).then(r => {
        if (r.data.state === 20000) {
          console.log(r.data.data)
          this.addForm = Object.assign(row, r.data.data)
          console.log(this.addForm)
        }
      })
    },
    //单个删除
    handleDelete(index, row) {
      axios.delete("/admin/book/" + row.id).then(r => {
        if (r.data.state === 20000) {
          this.$message.success("删除成功")
          this.queryBooks()
        } else {
          this.$message.error("删除失败")
        }

      })
    },
    //批量禁启销售
    multiMarketableById() {
      //检查 是否有效 字段是否统一并处理决定分支
      console.log(this.multipleSelectionMarketable)
      let first = this.multipleSelectionMarketable[0]
      for (let i = 1; i < this.multipleSelectionMarketable.length; i++) {
        if (first !== this.multipleSelectionMarketable[i]) {
          this.$message.warning("请统一选中书本的 是否销售 条件 ~")
          return
        }
      }
      //确认框 confirmButtonText 走 then 分支, cancelButtonText 走 catch 分支
      let confirmMessage = '禁止销售'
      if (first === 0)
        confirmMessage = '开启销售'
      this.$confirm("确认 " + confirmMessage + " 所有选中书的库存吗？", "批量" + confirmMessage, {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        //批量启用
        if (first === 0) {
          console.log(this.multipleSelectionId)
          axios.put("/admin/book/multiMarketable", this.multipleSelectionId).then(r => {
            if (r.data.state === 20000) {
              this.queryBooks()
              this.$message.success("批量 " + confirmMessage + " 成功")
            }
          }).catch(e => console.log(e))
        }
        //批量禁用
        if (first === 1) {
          console.log(this.multipleSelectionId)
          axios.put("/admin/book/multiDisMarketable", this.multipleSelectionId).then(r => {
            if (r.data.state === 20000) {
              this.queryBooks()
              this.$message.success("批量 " + confirmMessage + " 成功")
            }
          }).catch(e => console.log(e))
        }
      }).catch(e => console.log(e))
    },
    //批量禁启用
    multiEnableById() {
      //检查 是否有效 字段是否统一并处理决定分支
      console.log(this.multipleSelectionEnable)
      let first = this.multipleSelectionEnable[0]
      for (let i = 1; i < this.multipleSelectionEnable.length; i++) {
        if (first !== this.multipleSelectionEnable[i]) {
          this.$message.warning("请统一选中书本的 是否有效 条件 ~")
          return
        }
      }
      //确认框 confirmButtonText 走 then 分支, cancelButtonText 走 catch 分支
      let confirmMessage = '禁用'
      if (first === 0)
        confirmMessage = '启用'
      this.$confirm("确认 " + confirmMessage + " 所有选中书的库存吗？", "批量" + confirmMessage, {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        //批量启用
        if (first === 0) {
          console.log(this.multipleSelectionId)
          axios.put("/admin/book/multiEnable", this.multipleSelectionId).then(r => {
            if (r.data.state === 20000) {
              this.queryBooks()
              this.$message.success("批量 " + confirmMessage + " 成功")
            }
          }).catch(e => console.log(e))
        }
        //批量禁用
        if (first === 1) {
          console.log(this.multipleSelectionId)
          axios.put("/admin/book/multiDisEnable", this.multipleSelectionId).then(r => {
            if (r.data.state === 20000) {
              this.queryBooks()
              this.$message.success("批量 " + confirmMessage + " 成功")
            }
          }).catch(e => console.log(e))
        }
      }).catch(e => console.log(e))
    },
    //入库
    submitBooks() {
      if (this.addOrUpdate === 0) {
        this.dialogFormVisible = false
        console.log(this.addForm)
        axios.post("/admin/stock", this.addForm).then(r => {
          if (r.data.state === 20000)
            this.$message.success("入库完毕~")
        }).catch(e => console.log(e))
      } else if (this.addOrUpdate === 1) {
        this.dialogFormVisible = false
        console.log(this.addForm)
        axios.put("/admin/book/" + this.addForm.id, this.addForm).then(r => {
          if (r.data.data === 2000)
            this.$message.success("更新成功~")
        }).catch(e => console.log(e))
      }
    },
    //批量删除
    multiDeleteById() {
      //确认框 confirmButtonText 走 then 分支, cancelButtonText 走 catch 分支
      this.$confirm("确认删除所有选中书的库存吗？", "批量删除"
          , {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
        //发送批量删除请求
        console.log("批量删除请求发送参数：")
        console.log(this.multipleSelectionId)
        axios.post("/admin/book/multiDeleteByIds", this.multipleSelectionId).then(r => {
          if (r.data.state === 20000) {
            this.$message.success("批量删除成功")
            this.queryBooks()
          }
        }).catch(e => console.log(e))
      }).catch(e => console.log(e))
    },
    //重置或者自定义多选
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    //查询结果多选框选中处理器
    handleSelectionChange(val) {
      this.multipleSelection = val;
      this.multipleSelectionId = []
      this.multipleSelectionEnable = []
      this.multipleSelectionMarketable = []
      //遍历选中的元素获取 id 并保存到 multipleSelectionId 中作为参数
      for (let select of this.multipleSelection) {
        this.multipleSelectionId.push(select.id)
        this.multipleSelectionEnable.push(select.isEnable)
        this.multipleSelectionMarketable.push(select.isMarketable)
      }
    },
    //发送多条件查询库存的请求
    queryBooks() {
      let data = this.form
      console.log("提交表单：")
      console.log(data)
      axios.post("/admin/book/multiCondition", data)
          .then(r => {
            console.log("服务器返回：")
            console.log(r.data.data)
            this.tableData = r.data.data
          }).catch(e => {
        console.log(e)
      })
    },
    //重置查询表单
    resetForm() {
      this.form = {}
    },
    //是否启用的字段映射
    isEnableFormat(row, column) {
      switch (row.isEnable) {
        case 0:
          return '无效'
        case 1:
          return '有效'
      }
    },
    //是否销售
    isMarketableFormat(row, column) {
      switch (row.isMarketable) {
        case 0:
          return '禁止销售'
        case 1:
          return '启用销售'
      }
    }
  }
  ,
  computed: {
    ...mapState(['url'])
  },
}
</script>

<style scoped>
el-input {
  font-size: larger;
}
</style>